<template>
  <div class="mb-20" style="padding-top:44px;">
    <NavBar />
    <div class="flex justify-center">
			<div class="container-width">
				<div class="main">
					<div class="nav">
						首页 / 项目列表 / {{project.projectname}}
					</div>
					<div class="title">
						{{project.projectname}}
					</div>
					<div class="shangjitime flex justify-between">
						<div class="shangji">
							{{ project.shangji }}
						</div>
						<div class="time">
							<div><i class="el-icon-time"></i></div>
							<div style="overflow: hidden;white-space: nowrap;width: 68px;">{{project.createTime}}</div>
						</div>
					</div>
					<div class="lianxi flex flex-row">
						<div class="lianxifangshi flex flex-row">
							<div class="lianxiren">
								<span id="">
									联系人
								</span>
								<span id="">
									{{
                                     project.lianxifangshi
									}}
								</span>
							</div>
							<div class="lianxidianhua">
								<span id="">
									联系电话
								</span>
								<span id="">
								{{
									 project.xiangmudianhua
								}}
								</span>
							</div>
						</div>
						
						<div class="chankanmingpian">
							查看名片
						</div>
						<div class="jiesuoxiangmu">
							免费解锁项目
						</div>
					</div>
					<div class="xiangmucanshu flex justify-between">
						<div class="canshu">
							项目参数
						</div>
						<div class="shenhe">
							{{ project.shenpizhuangtai }}
						</div>
					</div>
					<div class="canshuitem flex flex-row">
						<div class="left flex flex-row">
							<div class="lable">
								意向区域：
							</div>
							<div class="value">
								{{ project.provincename }} {{ project.cityname }}
							</div>
						</div>
						<div class="right flex flex-row">
							<div class="lable">
								落地时间：
							</div>
							<div class="value">
								{{ project.luodishijian }}
							</div>
						</div>
					</div>
					<div class="canshuitem flex flex-row">
						<div class="left flex flex-row">
							<div class="lable">
								需求类型：
							</div>
							<div class="value">
														<div class="lable">{{ project.xiangmuleixing}}</div>
							</div>
						</div>
						<div class="right flex flex-row">
							<div class="lable">
								对接级别：
							</div>
							<div class="value">
								{{ project.duijiejibie }}
							</div>
						</div>
					</div>
					<div class="canshuitem flex flex-row">
						<div class="left flex flex-row">
							<div class="lable">
								注册资本：
							</div>
							<div class="value">
								{{ project.zhuceziben }} 万元
							</div>
						</div>
						<div class="right flex flex-row">
							<div class="lable">
								投资预计：
							</div>
							<div class="value">
								{{ project.touziyuji }} 万元
							</div>
						</div>
					</div>
					<div class="canshuitem flex flex-row">
						<div class="left flex flex-row">
							<div class="lable">
								产值预计：
							</div>
							<div class="value">
								{{ project.chanzhiyuji }} 万元
							</div>
						</div>
						<div class="right flex flex-row">
							<div class="lable">
								税收预计：
							</div>
							<div class="value">
								{{ project.shuishouyuji }} 万元
							</div>
						</div>
					</div>
					<div class="canshuitem flex flex-row">
						<div class="left flex flex-row">
							<div class="lable">
								就业岗位：
							</div>
							<div class="value">
								{{ project.jiuyerenshu }} 人
							</div>
						</div>
						<div class="right flex flex-row">
						</div>
					</div>
					<div class="canshuitem flex flex-row">
						<div class="left flex flex-row">
							<div class="lable">
								产业类型：
							</div>
							<div class="items flex flex-row">
								<div v-for="(item, index) in project.biaoqianArr" :key="index" class="item">
									{{ item }}
								</div>
							</div>
						</div>
					</div>
					<div class="xiangmucanshu flex flex-row">
						<div class="canshu">
							项目介绍
						</div>
						<div class="menkan">
							
						</div>
					</div>
					<div class="menkanvalue " v-html="changeRich(project.details)">
						
					</div>

					<div class="xiangmucanshu flex flex-row">
						<div class="canshu">
							项目需求
						</div>
						<div class="menkan">
							
						</div>
					</div>
					<div class="menkanvalue " v-html="changeRich(project.xiangmuxuqiu)">
						
					</div>

					<div class="xiangmucanshu flex flex-row">
						<div class="canshu">
							项目优势
						</div>
						<div class="menkan">
							
						</div>
					</div>
					<div class="menkanvalue " v-html="changeRich(project.xiangmuyoushi)">
						
					</div>

				</div>
			</div>
		</div>
  </div>
</template>

<script>
import { fetchProject } from '@/api/project'
import NavBar from "@/components/NavBar.vue"

export default {
  name: 'ProjectDetailView',
  components: {
    NavBar
  },
  data() {
    return {
      project: {}
    }
  },
  created() {
    fetchProject(this.$route.params.id).then(response => {
      this.project = response.data
    })
  },
  methods: {
    changeRich(str) {
      if (!str) {
        return '';
      }
      str = str.replace(/<img /g, '<img style="display:block;" ')
      let newStr = str.replace(/<(img).*?(\/>|<\/img>)/g, function(mats) {
        if (mats.indexOf('style') < 0) {
          return mats.replace(/<\s*img/, '<img style="max-width:100%;height:auto;"');
        } else {
          return mats.replace(/style=("|')/, 'style=$1max-width:100%;height:auto;');
        }
      });
      return newStr
    }
  }
}
</script>

<style lang="scss" scoped>

.nameMark {
  width: 1.4rem;
  height: 1.4rem;
  color: white;
  background-color: rgba(254, 119, 67, 1);
  text-align: center;
}

.main {
  width: 56.25rem;
}

.main .nav {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #A4A8AF;
  margin-top: 0.8125rem;
}

.main .title {
  font-size: 1.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #000000;
  letter-spacing: 2px;
  margin-top: 1.875rem;
}

.main .shangjitime {
  margin-top: 0.6875rem;
}

.main .shangjitime .shangji {
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FFFFFF;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  margin-left: 0.625rem;
  background: #FF5F00;
  border-radius: 0.8125rem;
}

.main .shangjitime .time {
  font-size: 0.75rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #8D8D8D;
  display: flex;
}

.main .lianxi {
  margin-top: 2.5625rem;
}

.main .lianxi .lianxifangshi{
  height: 3.4375rem;
  background: #F5F5F5;
}

.main .lianxi .lianxiren {
  font-size: 14px;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #5D606A;
  line-height: 3.4375rem;
  padding-left: 1.75rem;
  
}

.main .lianxi .lianxidianhua {
  font-size: 14px;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #5D606A;
  line-height: 3.4375rem;
  margin-left: 6.25rem;
  padding-right: 8.6875rem;
}

.main .lianxi .chankanmingpian{
  font-size: 1.1875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #FFFFFF;
  padding-top: 0.875rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  background: #ED1A23;
  margin-left: 0.6875rem;
}
.main .lianxi .jiesuoxiangmu{
  font-size: 1.1875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #FFFFFF;
  padding-top: 0.875rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  background: #137EC1;
  margin-left: 0.6875rem;
}

.main .xiangmucanshu{
  margin-top: 2.9375rem;
  margin-bottom: 2.1875rem;
}

.main .xiangmucanshu .canshu{
  font-size: 1.5rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #5E6069;
}
.main .xiangmucanshu .shenhe{
  font-size: 0.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #B5B2A5;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  border-radius: 0.875rem;
  border: 1px solid #F5F5F5;
}

.main .canshuitem{
  margin-bottom: 0.75rem;
}
.main .canshuitem .left{
  width: 25rem;
}
.main .canshuitem .left .lable{
  font-size: 0.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9C9C9C;
}
.main .canshuitem .left .value{
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
}
.main .canshuitem .right{
  margin-left: 0.625rem;
}
.main .canshuitem .right .lable{
  font-size: 0.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9C9C9C;
}
.main .canshuitem .right .value{
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
}

.main .canshuitem .left .items .item{
  font-size: 10px;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #FE7743;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  margin-right: 0.375rem;
  border: 1px solid #FE7743;
}

.main .jieshao{
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  margin-top: 2.3125rem;
}

.main .menkan {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #9DA1AA;
  margin-left: 2.1875rem;
  padding-top: 0.625rem;
}

.main .menkanvalue {
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  line-height: 1.625rem;
  color: #000000;
  padding: 0.875rem 1.375rem;
  background: #FFFAF7;
}
</style>